<template>
    <view>
        <view class="login-title">
            <view
                class="login-title-btn"
                :class="{ 'login-title-btn-active': true }"
                >登录

                <view class="bar"> </view
            ></view>
            <view
                class="login-title-btn"
                :class="{ 'login-title-btn-active': false }"
            >
                <navigator
                    url="/pages/register"
                    redirect
                    hover-class="className"
                    >注册</navigator
                >
            </view>
        </view>
        <view class="login-container">
            <view class="login-input-wrap">
                <view class="login-input">
                    <view class="login-input-box">
                        <input
                            type="number"
                            placeholder="手机号码"
                            placeholder-class="login-input-placeholder"
                            v-model="form.tel"
                            maxlength="11"
							class="ip_txt"
                        />
                    </view>
                    <view class="login-input-box">
                        <input
                            type="password"
                            placeholder="密码"
                            placeholder-class="login-input-placeholder"
                            v-model="form.password"
							class="ip_txt"
                        />
                    </view>
                </view>
                <view class="login-btn" @click="handleLogin"> 登录 </view>
                <view class="login-input-forget" @click="toForgetPassword">
                    忘记密码
                </view>
            </view>
        </view>
        <view class="login-select">
            <view
                class="login-select-box"
                :class="{ 'login-select-box-active': loginSelect }"
                @click="changeLoginSelect"
                >✓</view
            >
            <view class="login-select-text">
                请阅读并同意我们的
                <text @click="toUserAgreement">《服务条款》</text>、<text
                    @click="toUserAgreement"
                    >《隐私政策》</text
                >和
                <text @click="toUserAgreement">《儿童隐私保护政策》</text
                >进行注册和登录
            </view>
            <u-toast ref="uToast" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                tel: "",
                password: "",
            },
            loginSelect: false,
        };
    },
    methods: {
        handleLogin() {
            if (this.checkForm()) {
                this.loginReq();
            }
        },
        // 登录请求
        loginReq() {
            let o = {};
            o.mobile = this.form.tel;
            o.password = this.form.password;
            this.$u.post("login_as_password", o).then((res) => {
                uni.setStorageSync("token", res.data.token);
                this.toHome();
				this.$u.post('my_show',{}).then(r=>{
					uni.setStorageSync("user_info",r.data.user_info);
				})
            });
        },
        toHome() {
            uni.switchTab({
                url: "/pages/home",
            });
        },
        toForgetPassword() {
            uni.navigateTo({
                url: "/pages/forgetPassword",
            });
        },
        // 用户协议
        changeLoginSelect() {
            this.loginSelect = !this.loginSelect;
        },
        // toast
        showToast(msg) {
            this.$u.toast(msg);
        },
        toUserAgreement() {
            uni.navigateTo({
                url: "/pages/userAgreement",
            });
        },
        checkForm() {
            if (!this.form.tel) {
                this.showToast("请输入手机账号");
                return false;
            } else if (!this.form.password) {
                this.showToast("请输入密码");
                return false;
            } else if (!this.loginSelect) {
                this.showToast("请勾选用户协议");
                return false;
            }

            return true;
        },
    },
};
</script>

<style scoped>
	.ip_txt{
		font-size: 14px !important;
	}
page {
    background-color: rgb(253, 253, 240);
}
.login-container {
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.login-title {
    display: flex;
    justify-content: center;
    height: 180px;
    background-color: rgb(51, 204, 0);
    align-items: baseline;
	box-sizing: border-box;
    padding-top: 160rpx;
}
.login-title-btn {
    margin: 0 60rpx;
    padding: 10rpx 10rpx;
    font-size: 36rpx;
    color: #fff;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* .login-title-btn-active {
    border-bottom: 16rpx solid #e46c0b;
} */
.bar {
    width: 80rpx;
    height: 16rpx;
    background: linear-gradient(
        to right,
        rgba(183, 248, 160, 1),
        rgba(101, 220, 80, 1)
    );
    margin-top: 10rpx;
    border-radius: 8rpx;
}
.login-input-wrap {
    position: relative;
    background-color: #fff;
    top: -110rpx;
    border-radius: 20px;
}
.login-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 40rpx; */
	box-sizing: border-box;
	padding: 0px 5%;
}
.login-input-box {
    width: 100%;
    box-sizing: border-box;
    margin-top:20px;
}
.login-input-box input {
    background-color: rgb(250, 247, 250);
	height: 50px;
	box-sizing: border-box;
	padding-left: 20px;
	font-size: 14px;
	color: #000000;
    /* padding: 40rpx; */
    border-radius: 80rpx;
}
.login-input-placeholder {
    font-size: 36rpx;
}
.login-input-forget {
    width: 100%;
    text-align: end;
    margin: 40rpx 0;
    padding-right: 40rpx;
    color: rgb(170, 170, 170);
}
.login-btn {
    width: 90%;
    background-color: rgb(51, 204, 0);
    text-align: center;
    margin-top: 40rpx;
    /* padding: 40rpx; */
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	color: #fff;
	/* font-weight: bold; */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 80rpx;
    font-size: 40rpx;
    color: #fff;
	margin-top: 30px;
}
.login-select {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10rpx;
    justify-content: space-between;
    margin-top: 40rpx;
    position: fixed;
    bottom: 58rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
}
.login-select-box {
    height: 48rpx;
    width: 48rpx;
    border: 2rpx solid rgb(170, 170, 170);
    border-radius: 50%;
    text-align: center;
    line-height: 48rpx;
    color: rgba(0, 0, 0, 0);
}
.login-select-box-active {
    color: #fff;
    background-color: rgb(51, 204, 0);
}
.login-select-text {
    width: 90%;
    font-size: 24rpx;
    margin-left: 20rpx;
}
.login-select-text text {
    color: rgb(170, 170, 170);
}
</style>
